<template>
  <div>
    <van-uploader :after-read="afterRead" :max-count="1" class="upimg" v-if="!imgSrc"/>
    <div class="imgBox" v-if="imgSrc">
      <img :src="imgSrc" alt="" class="upimg">
      <van-icon name="delete" class="del" @click="imgSrc = 0"/>
    </div>
    <div class="upBtn">
      <van-radio-group v-model="radio" class="types">
        <van-radio :name="1">1寸</van-radio>
        <van-radio :name="2">2寸</van-radio>
        <van-radio :name="5">5寸</van-radio>
      </van-radio-group>
      <div class="upbtns">  
        <!-- <van-button icon="photo" type="primary" class="fl">裁剪图片</van-button> -->
        <van-button icon="photo" type="primary" @click="upload">上传图片</van-button>
      </div>
    </div>
    <!-- <h3 class="title">上传照片</h3>
    <ul class="types">
      <li>1寸</li>
      <li>2寸</li>
      <li>5寸</li>
    </ul>     -->
  </div>
</template>

<script>
/** 
 * 1寸 413*295
 * 2寸 626*413
 * 5寸 1500*1050
*/
import { Button, Uploader, RadioGroup, Radio, Icon } from 'vant'
import { test } from '@/config/api'
export default {
  components: {
    [Uploader.name]: Uploader,
    [Button.name]: Button,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Icon.name]: Icon
  },
  data() {
    return {
      radio: 1,
      fileList: [
        { src: 'https://img.yzcdn.cn/vant/cat.jpeg' }
      ],
      imgSrc: ''
    }
  },
  methods: {
    afterRead(file) {
      console.log(file)
      // 此时可以自行将文件上传至服务器
      this.fileList = [ {url: file.content} ];
      this.imgSrc = file.content
    },
    async upload(){
      try {
        let res = await test({
          data: {
            tel: '15083328977'
          },
          method: 'get'
        })
        console.log(res)
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style  lang="less" scope>
.imgBox{
  position: relative;
  width: 80vw;
  height: 80vw;
  margin: 10vh 10vw 0;
  img {
    width: 100%;
    max-height: 100%
  }
}
.del{
  position: absolute;
  bottom: 0;
  right: 0
}
.upimg {
  .van-uploader__upload{
    width: 80vw;
    height: 80vw;
    margin: 10vh 10vw 0;
  }
  .van-uploader__upload-icon{
    font-size: 2rem;
  }
} 
.fl{
  float: left;
}
// .fr{
//   float: right;
// }
.upBtn{
  width: 80vw;
  margin-left:  10vw;
  .types {
    font-size: 0.5rem;
    .van-radio{
      margin-top: 0.4rem
    }
  }
  .upbtns {
    margin-top: 0.5rem;
  }
  .fl, .fr{
    width: 46%
  }
  .van-button{
    width: 100%;
  }
}

</style>